<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org/extras/dialect"
      layout:decorate="layout/layout_info"
>
<head>
	<title>我的应用</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="../../static/asset/css/form.min.css" th:href="@{/asset/css/form.min.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/common/front.css" th:href="@{/asset/css/common/front.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/front/user-center.css" th:href="@{/asset/css/front/user-center.css}"/>
	<style>
		label input[type="checkbox"] {
			margin-right: 5px;
		}

		input[type="checkbox"][readonly] {
			opacity: .5;
		}
	</style>
</head>
<body>
<div layout:fragment="content" th:remove="tag">
	<div class="container-fluid display-flex p-0" style="flex: 1 1;">
		<div class="row no-gutters w-100">
			<div class="col-12 col-md-2" th:insert="layout/menus::submenu(${menus},0,'Front_Grant_History')" style="background: #3c3c3c;">
			</div>

			<div class="col-12 col-md-10">
				<div class="row no-gutters">
					<div class="col-md-12">

						<div class="card">
							<div class="card-header">
								授权应用
							</div>
							<div class="card-body">
								<div th:remove="all-but-first">
									<div class="media border border-top-0 border-left-0 border-right-0" th:each="client: ${clients}" style="padding:1.5rem;">
										<img class="align-self-start mr-3" th:src="@{${client.logo}}" alt="应用图标" style="width:60px;">
										<div class="media-body">
											<h5 class="mt-0" th:text="${client.name}">应用标题</h5>
											<div th:text="${client.description}">应用描述</div>
										</div>
										<div style="width:120px;">
											<a href="javascript:;" data-client-id="1"
											   th:attr="data-client-id=${client.clientId}, data-client-name=${client.name}, data-client-logo=${client.logo}">管理</a>
										</div>
									</div>
								</div>

								<div class="modal fade" id="scope-modal" tabindex="-1" role="dialog" aria-hidden="true">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
												<h5 class="modal-title">应用授权</h5>
												<button type="button" class="close" data-dismiss="modal" aria-label="Close">
													<span aria-hidden="true">&times;</span>
												</button>
											</div>
											<div class="modal-body">
												<div class="row no-gutters">
													<div class="col-12 px-3">
														允许 <a href="javascript:;" id="client-name">爱阅读</a> 有以下权限：
													</div>
												</div>

												<div class="row no-gutters p-3">
													<div class="col-7">
														<ul id="scope-list" data-client-id="1" class="list-unstyled" th:remove="all-but-first">
															<li th:each="i:${#numbers.sequence(0,3)}">
																<label>
																	<input type="checkbox" style="padding-top: 3px;"> 获取您的昵称，头像，昵称
																</label>
															</li>
															<li>
																发布、读取您的说说信息
															</li>
														</ul>
													</div>

													<div class="col-1 text-center pt-3">
														<i class="fa fa-arrow-right"></i>
													</div>

													<div class="col-4 text-center">
														<img id="client-logo" src="http://wsing.bssdl.kugou.com/0a2b9f77cf0ce06df42323fc3a8a3591.jpg"
														     style="width: 60px; height: 60px;" width="60" height="60" alt="">
													</div>
												</div>
											</div>
											<div class="modal-footer">
												<a href="#" id="scope-cancel" class="mr-auto">取消所有授权</a>

												<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
												<button type="button" class="btn btn-primary" id="scope-confirm">确认</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<th:block layout:fragment="script">
	<script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        $(function () {
            $('a[data-client-id]').on('click', function () {
                var clientId = $(this).data('clientId'), clientName = $(this).data('clientName'), clientLogo = $(this).data('clientLogo');
                $.ajax({
                    url: /*[[@{/scopes}]]*/ '#',
                    data: {clientId: clientId},
                }).then(function (a) {
                    console.log('receive data', a);
                    console.log('show data');
                    handleScopes(a.data, clientId, clientName, clientLogo);
                    $('#scope-modal').modal();
                    console.log('finished');
                    console.log('shown');
                });
            });

            function handleScopes(data, clientId, clientName, clientLogo) {
                console.log(data);
                $('#scope-list').empty().data('clientId', clientId);
                $('#client-name').text(clientName);
                $('#client-logo').attr('src', clientLogo);
                for (var i in data) {
                    var tempData = data[i];
                    var item = $.format('<li><label><input id="{0}" data-scope="{0}" type="checkbox" {1} {3}>{2}</label></li>',
                        tempData.value, tempData.selected ? 'checked="checked"' : '', tempData.description,
                        tempData.defaultSelected ? 'readonly="readonly"  onclick="return false;" onkeydown="return false;"' : '');
                    $(item).appendTo('#scope-list');
                }
            }

            $('.modal').on('click', '#scope-confirm', function () { //提交
                var clientId = $('#scope-list').data('clientId');
                var scopes = [];
                $('#scope-list input:checked').each(function () {
                    scopes.push($(this).data('scope'));
                });

                $.ajax({
                    type: 'post',
                    url: /*[[@{/scopes}]]*/ '#',
                    data: {clientId: clientId, scopes: scopes}
                }).then(function (result) {
                    App.handleAjax(result, function () {
                        $('#scope-modal').modal('hide');
                        App.alertSuccess('修改成功', '');
                    }, function () {

                    });
                })
            }).on('click', '#scope-cancel', function () { // 取消所有授权
                var clientId = $('#scope-list').data('clientId');
                $.ajax({
                    type: 'post',
                    url: /*[[@{/revoke}]]*/ '#',
                    data: {clientId: clientId}
                }).then(function (result) {
                    App.handleAjax(result, function () {
                        $('#scope-modal').modal('hide');
                        App.alertInfo('成功取消所有授权', '');
                    })
                });
            })

        });
        /*]]>*/
	</script>
</th:block>
</body>
</html>
